@import "common-var";
.reader-route-view {
  background: @dropdown-background;
  color: @dark-font-color;
  height: 100%;
  display: flex;
  flex-direction: column;

  .layout-module_contentWrapper {
    overflow: hidden; /* 添加滚动条，当内容超出内容部分高度时显示滚动条 */
    will-change: padding-left;

    .layout-module_headerWrapper {
      background: #FFFFFF;
      height: 52px;
      border: none;
      border-bottom: 1px solid @light-border-color;
      transform: translateY(0);
      transition: transform .2s ease .2s, left .2s cubic-bezier(.1, 0, 0, 1) 0s;
      will-change: transform, left;
      font-size: 14px;
      display: flex;
      justify-content: space-between;

      .header-crumb {
        color: @dark-font-color;
        float: left;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        line-height: 32px;
        transition: margin .1s cubic-bezier(.1, 0, 0, 1) 0s;
        overflow: hidden;
        height: 100%;

        .header_title {
          font-size: 14px;
          max-width: 400px;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .header-status-icon {
          margin-left: 5px;
          line-height: 16px;

          .iconfont {
            font-size: 14px;
            font-weight: bold;
          }
        }
      }

      .header-action {
        display: flex;
        align-items: center;
        justify-items: center;
        float: right;
        padding-right: 6px;
        height: 100%;
        color: #262626;

        .ivu-btn {
          margin-right: 10px;
        }

        .action-icon {
          width: 40px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;

          .iconfont {
            font-size: 20px;
            cursor: pointer;
          }


        }

      }
    }

    .layout-module_bookContentWrapper {
      position: relative;
      transition: padding .3s linear;
      background-color: #FFFFFF;
      height: calc(~"100vh - 52px");

      .bookReader-module_docContainer {
        height: 100%;
        overflow-y: auto;

        .doc_header {
          .doc_header_wrapper {
            margin: 24px 0 32px;

            .doc-article-title {
              word-break: break-word;
              font-family: Chinese Quote, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji;
              font-size: 36px;
              line-height: 1.389;
              font-weight: 700;
              color: #262626;
              display: inline;
              margin-right: 20px;
              font-variant-ligatures: none;
            }
          }
        }

        .reader-standard-wide {
          padding: 0 50px;
          max-width: 850px;
          margin: 0 calc(~"50vw - 425px") 0 auto;
        }

        .reader-ultra-wide {
          padding: 0 70px;
          margin: 0 320px 0 auto;
          max-width: calc(~"100% - 10px");

          .u-comment {
            padding: 0 100px 5px 0 !important;
          }

        }
      }
    }
  }

  .layout-module_asideWrapper {
    position: fixed;
    z-index: 998;
    right: 10px;
    top: 52px;
    width: 16%;
    height: calc(76vh);
    overflow: hidden;

    .reader-view {
      height: 90%;
      position: relative;
      z-index: 1;
      display: flex;
      flex-shrink: 0;
      flex-direction: column;
      margin-top: 24px;
      font-family: 'Chinese Quote', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;

      .reader-toc-pin {
        color: @dark-font-color;
        margin-bottom: 12px;
        padding-top: 8px;
        padding-left: 28px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 30px;
        -ms-flex-negative: 0;
        flex-shrink: 0;

        .reader-toc-pin-text {
          margin-right: 8px;
          font-weight: bold;
          line-height: 16px;

          .main-point {
            margin-right: 5px;
          }
        }
      }

      .reader-toc-inner {
        width: 100%;
        cursor: default;
        overflow-x: hidden;
        overflow-y: auto;

        .toc-content {
          position: relative;
          z-index: 2;
          //padding: 10px 0 30px 0;

          .toc-item {
            padding-right: 20px;
            height: 22px;
            font-size: 14px;
            line-height: 22px;
            margin-bottom: 6px;
            white-space: nowrap;
            border-left: 2px solid transparent;
            cursor: default;
            display: block;

            a {
              color: #585A5A;
            }
          }

          .toc-item:last-child {
            margin-bottom: 0;
          }

          .toc-depth-1 {
            padding-left: 26px;
          }

          .toc-depth-2 {
            padding-left: 43px;
          }

          .toc-depth-3 {
            padding-left: 60px;
          }

          .toc-depth-4 {
            padding-left: 77px;
          }

          .toc-depth-5 {
            padding-left: 112px;
          }

          .toc-depth-6 {
            padding-left: 128px;
          }


          .toc-selected {
            border-left-color: #00B96B;
            color: #262626;
            font-weight: bold;
          }

          .toc-item-inner {
            display: flex;
            align-items: center;
            cursor: pointer;

            .toc-item-text {
              color: @dark-font-color;
              overflow: hidden;
              text-overflow: ellipsis;
              display: block;
            }
          }
        }

        .toc-content::after {
          content: ' ';
          background: #D8DAD9;
          width: 2px;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
        }
      }
    }
  }

  /deep/.ivu-drawer {
    color: @dark-font-color;
    min-width: 320px;

    .ivu-drawer-content {
      .ivu-drawer-header {
        font-size: 14px;
        font-weight: bold;
        //border: unset;
        padding: 20px 20px 17px 20px;
        cursor: pointer;

        .return {
          font-size: 13px;
          margin-right: 4px;
        }

        &:hover {
          color: @light-font-color;
        }
      }

      .ivu-drawer-body {
        padding: 16px 20px;

        .drawer-setting-item {
          display: flex;
          background-color: #FAFAFA;
          border-radius: 6px;
          margin-bottom: 15px;
          font-size: 12px;
          padding: 16px;

          .label {
            font-size: 14px;
            margin-bottom: 5px;
          }

          .label_desc {
            color: @grey-white-font-color;
          }

          .article-time{
            display: flex;
            flex-direction: column;

            span {
              margin: 3px 0;
            }
          }
        }

        .time-info, .more-setting {
          flex-direction: column;

          .ivu-divider {
            margin: 12px 0;
            color: @border-color_normal;
          }
        }

        .page-size, .theme-sync {
          height: 70px;
          align-items: center;
          justify-content: space-between;

          .label-wrapper {
            display: flex;
            align-items: center;

            .icon-wrapper {
              margin-right: 8px;
              display: flex;
              .iconfont {
                font-size: 23px;
              }
            }
          }
        }

        .doc-setting-btn {
          display: flex;
          align-items: center;
          line-height: 25px;
          font-size: 14px;
          border-radius: 4px;
          cursor: pointer;
          padding: 5px 3px;

          &:first-child {
            margin-top: 5px;
          }

          &:hover {
            background: #E7E9E8;
          }

          .iconfont {
            margin-right: 8px;
          }
        }

        .save-version {
          .tab-content-text {
            margin-left: 24px;
          }
        }

        .delete-btn {
          color: @delete-red;
        }
      }
    }
  }

  .ivu-spin-fix {
    position: unset!important;
    background-color: unset;
  }

  .back-top {
    position: absolute;
    z-index: 999;
    bottom: 50px;
    right: 50px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,1);
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);

    .to-top {
      border-radius: 50%;
      margin-left: 7.5px;
      font-size: 33px;
      color: @light-font-color;
    }

    &:hover {
      background: @dropdown-item-hover;

      .to-top {
        color: @dark-font-color;
      }
    }
  }

  .enable-background-backTop {
    background: var(--theme-color);
    box-shadow: 0 0 6px var(---border-color);

    .to-top {
      color: var(--font-color);
    }
    &:hover {
      background: var(--dropdown-item-hover);

      .to-top {
        color: var(--font-color);
      }
    }
  }
}

.select-group {
  width: 252px;
  position: relative;

  .select-group-title {
    padding: 14px 16px 0;
    margin-bottom: 15px;

    .select-group-p1 {
      font-size: 14px;
      color: @dark-font-color;
      margin-bottom: 4px;
      font-weight: 500;
    }

    .select-group-p2 {
      font-size: 13px;
      color: @light-font-color;

      a {
        color: @link-color;
      }
    }
  }

  .select-group-tags {
    min-height: 65px;
    max-height: 240px;
    margin: 10px 16px 12px 16px;
    color:  @dark-font-color;

    .select-group-tags-check {
      margin-bottom: 12px;

      lebal {
        display: flex;
        align-items: center;
      }

      .select-group-tags-checkboxWrapper {
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 13px;
        font-variant: tabular-nums;
        line-height: 1.5715;
        list-style: none;
        font-feature-settings: "tnum", "tnum";
        display: inline-flex;
        align-items: baseline;
        line-height: inherit;
        align-items: center;
        cursor: pointer;

        .checkbox-label {
          padding-right: 8px;
          padding-left: 8px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .select-group-footer {
    border-top: 1px solid @border-color_normal;
    line-height: 45px;
    font-size: 14px;
    color: @light-font-color;
    padding-left: 16px;
    cursor: pointer;

    .iconfont {
      font-size: 14px;
    }
  }
}

.enable-background {
  .select-group {
    .select-group-title {
      .select-group-p1 {
        color: var(--font-color);
      }

      .select-group-p2 {
        color: var(--title-color);
      }
    }

    .select-group-tags {
      color: var(--font-color);
    }

    .select-group-footer {
      border-color: var(--border-color);
      color: var(--title-color);
    }
  }
}